<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>侦听器</title>
</head>

<body>
  <div id="root">
    <input type="text" v-model='username'>
    <!-- 当username==admin 显示msg -->
    {{ msg }}
    <hr>
    <input type="text" v-model='user.name'>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        username: 'aaa',
        msg: '',
        user: { id: 1, name: '张三' },
        user:{
          username:'',
          password:''
        }
      },
      // 侦听器 侦听的对象是 data数据源中的变量
      watch: {
        // 方法名和 data中定义的变量名 一致
        // 参数1 新值
        // 参数2 旧值，没有变化的值
        username(newVal, oldVal) {
          // console.log(newVal,oldVal)
          if (newVal == 'admin') {
            this.msg = 'admin是一个特别的用户名，不建议你使用'
          }
        },
        'user.name': {
          handler(newVal, oldVal) {
            // console.log(newVal, oldVal)
            // 网络请求，判断账号是否存在，存在提示，用户存在
          },
          // 深度对比
          deep: true
        }
      }
    })
  </script>
</body>

</html>